<template>
    <l-layout style="background: #f1f2f5;" :left="240" >
        <template #left >
            <l-panel title="常用按钮" style="padding:8px 0 0 0;" >
                <el-tree @check="handleCheck"  default-expand-all show-checkbox ref="tree" node-key="id" :highlight-current="true"  :data="myTreeData" >
                    <span class="lr-tree-node"  slot-scope="{ node }">
                        {{ node.label }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding:8px 0 0 4px;">
            <l-table
                :dataSource="config.btns"
                :columns="columns" 
                :isSortable="true"
                rowKey="id"
                :isShowNum="false"
                >
                <template v-slot:isRowBtn="scope">
                    <el-switch size="mini"  v-model="scope.row.isRowBtn" :disabled="['Add','Edit','Delete','Details'].includes(scope.row.id)" >
                    </el-switch>
                </template>
            </l-table >
        </l-panel>
    </l-layout>
</template>
<script>
export default {
    name:'webcode-btns',
    inject: ["formConfig"],
    components:{

    },
    props:{
        formType:Number
    },
    computed:{
        config(){
            return this.formConfig;
        },
        myTreeData(){
            return this.treeData
        }
    },
    data(){
        return {
            columns: [
                {label:'名称',prop:'label',minWidth:'150'},
                {label:'ID',prop:'prop',minWidth:'120'},
            ],
            treeData:[
                {label:'Add',id:'Add',prop:'Add',isRowBtn:false},
                {label:'Edit',id:'Edit',prop:'Edit',isRowBtn:true},
                {label:'Delete',id:'Delete',prop:'Delete',isRowBtn:true},
                {label:'Details',id:'Details',prop:'Details',isRowBtn:true},
            ]
        };
    },
    created () {
    },
    methods:{
        handleAddBtn(){
            this.config.btns.push({id:this.$uuid(),label:'',prop:'',icon:'',isRowBtn:false,notHtml:false})
        },
        handleRemove(index){
            this.config.btns.splice(index,1);
        },
        handleCheck($node,data){
            const addCols = data.checkedNodes.filter(t=> this.config.btns.findIndex(t2=>t2.id ==t.id ) == -1)
            const removeCols = this.config.btns.filter(t=> data.checkedNodes.findIndex(t2=>t2.id == t.id) == -1)

            if(removeCols.length >0){
                this.config.btns = this.config.btns.filter(t=>removeCols.findIndex(t2=>t2.id == t.id) == -1)
            }
            
            if(addCols.length >0){
                this.config.btns.push(...addCols)
            }
        },
        setCheckedKeys(keys){
            this.$refs.tree.setCheckedKeys(keys)
        }
    }
}
</script>
